<template>
  <div id="znxd-form">
    <el-form
      :model="formData"
      :rules="formRules"
      :label-width="labelWidth || 'auto'"
      class="demo-ruleForm"
      ref="form"
    >
      <el-row>
        <el-col
          v-for="(column, index) in formColumn"
          :key="index"
          :span="column.span ? column.span : 24"
        >
          <el-form-item :label="column.label" :prop="column.name">
            <!-- select 选择 -->
            <el-select
              v-if="column.type == 'select'"
              v-model="formData[column.name]"
              clearable
              filterable
              placeholder="请选择"
              :disabled="column.disabled || false"
            >
              <el-option
                v-for="item in column.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <!-- select 选择-->
            <!-- textarea 文本-->
            <el-input
              v-else-if="column.type == 'textarea'"
              :type="column.type"
              v-model="formData[column.name]"
              :maxLength="column.maxLength ? column.maxLength : 100"
            ></el-input>
            <!-- textarea 文本-->
            <!-- radio 单选-->
            <el-radio-group
              v-else-if="column.type == 'radio'"
              v-model="formData[column.name]"
            >
              <el-radio
                v-for="item in column.options"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
            <!-- radio 单选-->
            <!-- view 组件视图-->
            <div v-else-if="column.type == 'view'">
              <!-- vue bug  初始给一个id容器，但在容器上也放一个同样的id容器，解决重载丢失问题-->
              <div :id="column.name"></div>
            </div>
            <!-- view 组件视图-->
            <!-- label -->
            <div v-else-if="column.type == 'label'">
              <!-- vue bug  初始给一个id容器，但在容器上也放一个同样的id容器，解决重载丢失问题-->
              <div class="example" v-html="column.content"></div>
            </div>
            <!-- label-->
            <!-- 数字 输入框-->
            <el-input
              v-else-if="column.type == 'number'"
              v-model="formData[column.name]"
              :maxLength="column.maxLength ? column.maxLength : 100"
              @keyup.native="handleKeyUp(column.name)"
            ></el-input>
            <!-- input 输入框-->
            <!-- input 输入框-->
            <el-input
              v-else
              v-model="formData[column.name]"
              :maxLength="column.maxLength ? column.maxLength : 100"
            ></el-input>
            <!-- input 输入框-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item v-if="formButtons && formButtons.length > 0">
        <znxd-button-list
          :buttons="formButtons"
          :initData="formData"
        ></znxd-button-list>
      </el-form-item>
      <!-- <el-form-item v-else>
        <el-button type="primary" @click="onSave">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>-->
    </el-form>
  </div>
</template>
<script>
import Vue from "vue"
import znxdButtonList from "../../znxd-button-list/src/main.vue"
export default {
  name: "znxd-form",
  components: {
    znxdButtonList
  },
  data () {
    return {
      formData: {}
    }
  },
  props: {
    /* formColumn 自定义表单项 支持  input、select、textarea、radio、view（component对象）
    示例：
     this.formColumn = [
        {
          name: "datasourceName",
          label: "数据源名称",
          type: "input",
          options: [],
          span:24,
          maxLength:100
        },
        {
          name: "datasource",
          label: "数据源类型",
          type: "select",
          options: this.typeOptions
        },
        {
          name: "comments",
          label: "数据源描述",
          type: "textarea",
          maxLength:100
        },
        {
          name: "jdbcUrl",
          label: "JDBC URL",
          type: "input"
        },
        {
          name: "jdbcUsername",
          label: "用户名",
          type: "input"
        },
        {
          name: "jdbcPassword",
          label: "密码",
          type: "input"
        },
        {
          name: "status",
          label: "是否启用",
          type: "radio",
          options: this.statusOptions
        },
        {
          name: "available",
          label: "测试",
          type: "view",
          template: dbLink
        }
      ];
    */
    formColumn: Array,
    formRules: Object,
    initData: Object,
    formButtons: Array, // 按钮配置参考按钮组件配置规则
    // visible: Boolean // 用于重置表单改为弹框组件重载之后弃用
    value: Object,
    labelWidth: String
  },
  watch: {
    // visible(val) {
    //   if (!val) {
    //     this.formData = {};
    //     this.$refs.form.resetFields();
    //   }
    // },
    initData: {
      deep: true,
      handler: function (val) {
        this.formData = Object.assign({}, val)
        this.$refs.form.resetFields()
      }
    },
    formData: {
      deep: true,
      handler: function (val) {
        this.$emit("input", val)
      }
    }
    // value: {
    //   deep: true,
    //   handler: function (val) {
    //     // this.$emit("input", val);
    //     console.log("value", val);
    //   }
    // }
  },
  methods: {
    // 处理input只能输入数字逻辑
    handleKeyUp (name) {
      if (!(/(^[0-9]\d*$)/.test(this.formData[name]))) {
        this.formData[name] = this.formData[name].substr(0, this.formData[name].length - 1)
      }
    },
    // onSave() {
    //   this.$refs.form.validate((isWell) => {
    //     if (isWell) {
    //       this.$emit("handeSave", this.formData);
    //     } else {
    //       return false;
    //     }
    //   });
    // },
    onCancel () {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
    },
    // 校验数据
    validateForm () {
      let flag = null
      this.$refs.form.validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    },
    // 挂载组件
    component (column) {
      let _this = this
      // console.log("component", _this.formData.id);
      const Counter = Vue.extend(column.template)
      // console.log("Counter");
      const instance = new Counter({
        propsData: {
          name: column.name, // 绑定参数
          label: column.label, // 描述
          initData: _this.formData, // 传入表单
          // 设置回调函数
          handleSetModel: (val, name) => {
            _this.handleSetModel(val, name)
          }
        }
      })
      // console.log("instance");
      // console.log("instance _this.formData", _this.formData.id);
      instance.$mount("#" + column.name)
    },
    // 组件赋值
    handleSetModel (val, name) {
      this.formData[name] = val
    },
    // 挂载全部组件
    initComponent () {
      this.formColumn.map((column) => {
        if (column.type === "view") {
          this.component(column)
        }
      })
    }
  },
  mounted () {
    if (this.initData) {
      this.formData = Object.assign({}, this.initData)
    } else {
      this.formData = Object.assign({}, this.value)
    }
    this.initComponent()
  }
};
</script>
<style lang="scss" scoped>
#znxd-form {
  .example {
    line-height: 1.8rem;
  }
}
</style>
